<template>
  <view class="regsiter-wrap">
    <back :back-title="backTitle" class="back"></back>
    <view v-for="(item, key) in info" :key="key" class="input-item">
			<image class="user-icon" v-if="key === 'userName'" src="/static/images/common/first.png"></image>
      <view v-else class="tag"></view>
      <view class="title">{{infiList[key].title}}</view>
      <input v-if="key!=='userSex'" type="text" v-model="info[key]" :placeholder="infiList[key].placeholder" class="input">
			<view v-else class="sex-box">
				<view class="sex" @click="handleChangeSexMan">
					<view class="sex-title">男</view>
					<image v-if="info.userSex === 2" src="/static/images/common/check.png" mode=""></image>
					<image v-if="info.userSex !== 2" src="/static/images/common/none.png" mode=""></image>
				</view>
				<view class="sex" @click="handleChangeSexFemel">
					<view class="sex-title">女</view>
					<image v-if="info.userSex === 1" src="/static/images/common/check.png" mode=""></image>
					<image v-if="info.userSex !== 1" src="/static/images/common/none.png" mode=""></image>
				</view>
			</view>
    </view>
		<button class="btn" @click="handleSubmit">确认</button>
  </view>
</template>
<script>
	import { register } from '../../api/login'
export default {
  name: 'register',
  data() {
    return {
      backTitle: '注册信息',
      infiList: {
        userName:{
          icon: '',
          title: '申请人',
          placeholder:'请填写姓名'
        },
        userIdCard: {
          title: '身份证信息',
          placeholder:'请填写身份证号'
        },
        userSex: {
          title: '性别',
        },
        userPhone:{
          title: '联系电话',
          placeholder: '请填写手机号码'
        },
        userPassword: {
          title: '账户密码',
          placeholder: '请填写密码，账号为手机账号'
        },
        guardianOneName:{
          title: '监护人姓名',
          placeholder: '请填写监护人1姓名'
        },
        guardianOnePhone:{
          title: '监护人电话',
          placeholder: '请填写监护人1手机号码'
        },
        guardianTwoName:{
          title: '监护人姓名',
          placeholder: '请填写监护人2姓名'
        },
        guardianTwoPhone:{
          title: '监护人电话',
          placeholder: '请填写监护人2手机号码'
        }
      },
      info: {
        userName:'',
        userIdCard:'',
        userSex: 2,
        userPhone:'',
        userPassword:'',
        guardianOneName:'',
        guardianOnePhone:'',
        guardianTwoName:'',
        guardianTwoPhone:'',
      },
			base: {}
    }
  },
	onLoad(params) {
		const { base } = params
		this.base = {...JSON.parse(base)}
	},
  methods:{
    handleChangeSexMan() {
      this.info.userSex = 2
    },
    handleChangeSexFemel(){
      this.info.userSex = 1
    },
		async handleSubmit() {
			const flag = this.validity()
			if (flag) {
				uni.showLoading({
					title: '正在注册'
				})
				const res = await register({...this.info,...this.base})
				uni.hideLoading()
				uni.showToast({
					title: '注册成功',
					icon: 'none',
					duration: 1500,
					success() {
						uni.navigateTo({
							url: '/pages/login/index',
							animationType:'pop-in'
						})
					}
				})
			}
		},
		showToast(desc) {
			uni.showToast({
				icon: 'none',
				title: desc
			});
		},
		validity() {
			const {userName, userIdCard, userPhone, userPassword, guardianOnePhone, guardianOneName,guardianTwoName, guardianTwoPhone } = this.info
			const phoneReg = /^1[3456789]\d{9}/
			const idCardReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
			if(userName === '') {
				this.showToast('申请人姓名不能为空')
				return false
			}
			if(!idCardReg.test(userIdCard)) {
				this.showToast('身份证格式不正确')
				return false
			}
			if(!phoneReg.test(userPhone)) {
				this.showToast('联系电话格式不正确')
				return false
			}
			if(userPassword.length < 6 || userPassword.length > 16) {
				this.showToast('密码为6~16位')
				return false
			}
			if(!phoneReg.test(guardianOnePhone) && !phoneReg.test(guardianTwoPhone)) {
				this.showToast('监护人电话格式不正确')
				return false
			}
			if(guardianOneName === '' && guardianTwoName === '') {
				this.showToast('监护人姓名不能为空')
				return false
			}
			if(userPhone === guardianOnePhone || guardianOnePhone === guardianTwoPhone ||  userPhone === guardianTwoPhone ) {
				this.showToast('电话不能相同')
				return false
			}
			if(userName === guardianOneName || guardianOneName === guardianTwoName ||  userName === guardianTwoName ) {
				this.showToast('姓名不能相同')
				return false
			}
			return true
		}
  }

}
</script>
<style lang="scss" scoped>
.regsiter-wrap{
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
  padding: 0 20upx 20upx;
  box-sizing: border-box;
	.back{
		position: fixed;
		left: 0;
		width: 100%;
		top:0;
		background-color: #fff;
		z-index: 10;
	}
  .input-item{
    width: 100%;
    height:110upx;
    border:2upx solid rgba(225,225,225,1);
    border-radius:55upx;
    margin-bottom: 20upx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    &:nth-last-of-type(1){
      margin-bottom: 0;
    }
		&:nth-of-type(1){
		  margin-top: 156upx;
		}
    .title{
      font-size: 30upx;
      color: #333;
      margin-right: 40upx;
      width: 148upx
    }
    .input{
      flex: 1;
      padding-right: 50upx;
      box-sizing: border-box;
      font-size: 30upx;
      color: #333;
      height: 100%;
      border:none;
      background-color: #fff;
    }
		.user-icon{
			width:80upx;
			height:80upx;
			// margin-left: 32upx;
      margin-right: 12upx;
		}
    .tag{
      width:16upx;
      height:16upx;
      border-radius:50%;
      margin-left: 40upx;
      margin-right: 40upx;
    }
    &:nth-of-type(3n+2) {
      .tag{
        background-color: #FFB7B7;
      }
    }
    &:nth-of-type(3n+3) {
      .tag{
        background-color: #FFDAA1;
      }
    }
    &:nth-of-type(3n+4) {
      .tag{
        background-color: #A5E2FF;
      }
    }
  }
}
.btn{
	margin-top: 40upx;
	width:100%;
	height:97upx;
	background-color:rgba(44,109,210,1);
	border-radius:10upx;
	border: none;
	font-size:38upx;
	color:rgba(255,255,255,1);
	outline: none;
}
.sex-box{
  display: flex;
  height: 100%;
  align-items: center;
  flex: 1;
  .sex{
    flex: 1;
    display: flex;
    align-items: center;
    height: 100%;
    margin-right: 60upx;
    .sex-title {
      font-size: 30upx;
      color: #333;
      margin-right: 22upx;
    }
    image {
      width:42upx;
      height:42upx;
    }
  }
}
</style>
